<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My Rentpad Account</title>
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
            @font-face
            {
            font-family: avant;
            src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            -webkit-overflow-scrolling: touch; 
        </style>
        <script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/token/jquery.tokeninput.js"></script>  
        <script type="text/javascript">
            $(function() {
                showListingsManager();
                $("#table-listings tr:even").css("background-color", "#f7f7f7");
                $("#table-featureds tr:even").css("background-color", "#f7f7f7");
                $("#table-leads tr:even").css("background-color", "#f7f7f7");                
            });         
            
            function showAccountDetails(){
                $("#section-account-details").show();
                $("#section-featured-properties").hide();
                $("#section-listings-manager").hide();
                $("#section-rental-leads").hide();
                
                $("#tab-1").css("background-color", "#167FFC");
                $("#tab-2").css("background-color", "#ffffff");
                $("#tab-3").css("background-color", "#ffffff");
                $("#tab-4").css("background-color", "#ffffff");
                                
                $("#tab-1").css("color", "#fff");  
                $("#tab-2").css("color", "#000"); 
                $("#tab-3").css("color", "#000"); 
                $("#tab-4").css("color", "#000"); 
            }
            
            function showFeaturedProperties(){
                $("#section-account-details").hide();
                $("#section-featured-properties").show();
                $("#section-listings-manager").hide();
                $("#section-rental-leads").hide();
                
                $("#tab-1").css("background-color", "#ffffff");
                $("#tab-2").css("background-color", "#167FFC");
                $("#tab-3").css("background-color", "#ffffff");
                $("#tab-4").css("background-color", "#ffffff");
                                
                $("#tab-1").css("color", "#000"); 
                $("#tab-2").css("color", "#fff");  
                $("#tab-3").css("color", "#000"); 
                $("#tab-4").css("color", "#000"); 
            }
            
            function showListingsManager(){                
                $("#section-account-details").hide();
                $("#section-featured-properties").hide();
                $("#section-listings-manager").show();
                $("#section-rental-leads").hide();
                                
                $("#tab-1").css("background-color", "#ffffff");
                $("#tab-2").css("background-color", "#ffffff");
                $("#tab-3").css("background-color", "#167FFC");
                $("#tab-4").css("background-color", "#ffffff");
                
                $("#tab-1").css("color", "#000");  
                $("#tab-2").css("color", "#000"); 
                $("#tab-3").css("color", "#fff"); 
                $("#tab-4").css("color", "#000");
            }
            
            function showRentalLeads(){
                $("#section-account-details").hide();
                $("#section-featured-properties").hide();
                $("#section-listings-manager").hide();
                $("#section-rental-leads").show();       
                
                $("#tab-1").css("background-color", "#ffffff");
                $("#tab-2").css("background-color", "#ffffff");
                $("#tab-3").css("background-color", "#ffffff"); 
                $("#tab-4").css("background-color", "#167FFC"); 
                
                $("#tab-1").css("color", "#000");  
                $("#tab-2").css("color", "#000"); 
                $("#tab-3").css("color", "#000");  
                $("#tab-4").css("color", "#fff");      
            }
            
            function showLead(id, name, email, phone, description) {
                var lead = "name:  " + name + "\nemail:  " + email + "\nphone:  " + phone + "\n\n" + description + "\n\n";
                alert(lead);
                
                $.ajax({
                    type: 'POST',
                    url: "${model.props.appPath}/ws/lead.htm",
                    data: {
                        leadID: id,
                        name: "${model.user.firstName} ${model.user.lastName}",
                        email: "${model.user.email}",
                        a: 77
                    },
                    timeout: 200000,
                    success: function(data) {  }
                });
            }
        </script>
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
    </head>

    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: avant, Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div style="margin-top: 0px; background-color: white;">

            <%@include file="header.jsp" %>

            
            
            <div style="width: 100%; text-align: left; font-family: avant, Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1200px; margin-top: 10px; margin: 0 auto;">

                    <br>
                    <br>
                    <br>
                    
                    <span style="font-size: 24px; font-weight: bold; display:block;">&nbsp;&nbsp;&nbsp;&nbsp;Welcome back, ${model.user.firstName}!</span>  
                    
                    <br>
                    
                    <table cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; font-size: 15px; padding: 5px; border: 1px solid #c4c4c4;">
                        <tr>
                            <td id="tab-3" align="center" style="width: 25%; border: 1px solid #167FFC; cursor: pointer;" onclick="showListingsManager()">Listings Manager</td>
                            <td id="tab-2" align="center" style="width: 25%; border: 1px solid #167FFC; cursor: pointer;" onclick="showFeaturedProperties()">Featured Properties</td>
                            <td id="tab-4" align="center" style="width: 25%; border: 1px solid #167FFC; cursor: pointer;" onclick="showRentalLeads()">Rental Leads</td>
                            <td id="tab-1" align="center" style="width: 25%; border: 1px solid #167FFC; cursor: pointer; height: 30px; " onclick="showAccountDetails()">My Account</td>
                        </tr>
                    </table>
                    
                    
                    <div id="section-account-details" style="padding: 20px; background-color: #f7f7f7;">
                        
                        <table cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; padding: 0px;">
                            <tr>
                                <td>
                                    <span id="manager" style="font-size: 22px; font-weight: bold;"></span>
                                </td>
                                <td align="right">
                                    &nbsp;&nbsp;&nbsp;<a href="account.htm?a=4&id=${model.user.id}" style="color: #167FFC; font-size:14px;">edit account / change password</a>
                                </td>
                            </tr>
                        </table>
                                                                                   
                        <table cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; padding: 0px;">
                            <tr>
                                <td>
                                    <hr style="border: 1px solid #fff;">
                                </td>
                            </tr>
                            <tr>
                                <td style="vertical-align: top;">
                                    <table cellpadding="5" cellspacing="5" >
                                        <tr><td>Display Name: ${model.user.firstName} ${model.user.lastName}</td><td></td></tr>   
                                        <tr><td>Email: ${model.user.emailPrimary}</td><td></td></tr>   
                                        <tr><td>Mobile: ${model.user.mobilePrimary}</td><td></td></tr>  
                                        <tr><td>Landline: ${model.user.landlinePrimary}</td><td></td></tr>                          
                                    </table>
                                </td>
                            </tr>
                        </table>
                                    
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        
                    </div>
                                      
                             
                    <div id="section-featured-properties" style="padding: 20px; background-color: #f7f7f7;">  
                                               
                        <c:if test="${model.showFeatured == 1}"> 
                            
                            <table cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; padding: 0px;">
                                <tr>
                                    <td>
                                        
                                    </td>
                                    <td align="right">
                                        <a href="${model.props.appPath}/featured.htm?a=21"><span id="manager" style="font-size: 14px; font-weight: normal; color: #167FFC;">feature a property</span></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <hr style="border: 1px solid #fff;">
                                    </td>
                                </tr>
                            </table>

                            <c:choose>

                                <c:when test="${fn:length(model.userFeatureds) > 0}">

                                    <table id="table-featureds" cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; font-size: 13px; padding: 5px;">
                                        
                                        <tr>
                                            <th width="118px;" style="height: 10px;"></th> 
                                            <th></th>    
                                            <th align="center"><span title="This shows the date and time when this listing started to be featured.">start date</span></th>                        
                                            <th align="center"><span title="This shows the date and time when this listing's feature time will end." >end date</span></th>                           
                                            <th align="center"><span title="This shows the search results are where your listing is featured. You can click on it =)">category</span></th>      
                                            
                                        </tr>
                                        
                                        <tr>
                                            <td colspan="5">
                                                <hr style="border: 1px solid #fff;">
                                            </td>
                                        </tr>
                                        
                                        <c:forEach items="${model.userFeatureds}" var="featured">
                                            <tr> 
                                                <td>
                                                    <a href="listing.htm?a=2&id=${featured.listingID}" style="color: #369;">
                                                        <img src="${model.props.rootPath}/uploads/img/002-${featured.listingPrimaryPhoto.filename}" style="height: 60px; width: 116px;"/>
                                                    </a>
                                                </td>
                                                <td style="width: 320px;">
                                                    <table>
                                                        <tr></tr>
                                                        <tr style="background-color: transparent;">
                                                            <td><a href="listing.htm?a=2&id=${featured.listingID}" style="color: #000; font-size: 13px;"><div style="max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${featured.listingTitle}</div></a></td>
                                                        </tr>
                                                    </table>                                    
                                                </td>
                                                <td align="center">
                                                    ${featured.strStartDate}
                                                </td >
                                                <td align="center">
                                                    ${featured.strEndDate}
                                                </td>
                                                <td align="center">
                                                    <a href="${model.props.appPath}/${featured.displayTermURL}/${featured.displayCityURL}" style="color:#000;">${featured.displayCity}, &nbsp;${featured.displayTerm}</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="5">
                                                    <hr style="border: 1px solid #fff;">
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </table>


                                </c:when>

                                <c:otherwise>                            
                                    <table id="table-featured-listings" cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; font-size: 13px; padding: 5px;">
                                        <tr>
                                            <td align="left">
                                                <table cellpadding="5" cellspacing="5">
                                                    <tr>
                                                        <td><img src="${model.props.appPath}/img/apples.jpg" style="height: 100px;"/></td>
                                                        <td align="left">
                                                            <span style="color: #333; font-size: 15px;">
                                                                <ul>
                                                                    <li style="padding:3px;"><span style="font-size: 14px;">Make your property stand out from hundreds of other properties</span> </li>
                                                                    <li style="padding:3px;"><span style="font-size: 14px;">Always appear on top of every search page</span></li>
                                                                    <li style="padding:3px;"><span style="font-size: 14px;">Be seen quicker, and a lot more times than others</span></li>
                                                                    <li style="padding:3px;"><span style="font-size: 14px;">
                                                                        <a href="${model.props.appPath}/rentpad-featured-properties"><span id="manager" style="font-size: 15px; font-weight: normal; color: #167FFC;">Tell me more about featured properties</span></a></span>
                                                                    </li>
                                                                </ul>
                                                            </span>
                                                        </td>
                                                    </tr>
                                                </table>

                                                <br><br><bR>
                                                <br><br><bR>
                                                
                                            </td>
                                        </tr>
                                    </table>
                                </c:otherwise>
                            </c:choose>

                        </c:if>
                    </div>   
                                     
                        
                    <div id="section-listings-manager" style="padding: 20px; background-color: #f7f7f7;">
                        
                        <table cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; padding: 0px;">
                            <tr>
                                <td>

                                </td>
                                <td align="right">
                                    <a href="${model.props.appPath}/post"><span id="manager" style="font-size: 14px; font-weight: normal; color: #167FFC;">list a new property</span></a>
                                </td>
                            </tr>
                        </table>
                                    
                        <table id="table-listings" cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; font-size: 13px; padding: 5px;">
                            
                            <tr>
                                <td colspan="6">
                                    <hr style="border: 1px solid #fff;">
                                </td>
                            </tr>
                            <tr>
                                <th width="118px;" style="height: 25px;"></th>
                                <th></th>
                                <th align="center"><span title="Impressions- shows the number of times your posting appeared on the search results.">impressions</span></th>
                                <th align="center"><span title="Views- shows how many times your posting has been viewed.">views</span></th>
                                <th align="center"><span title="Status- tells renters if your property is still available or already rented out">status</span></th>
                                <th align="center"><span title="Using these actions, you can set your property's status to available or not available">action</span></th>                                
                            </tr>
                            <tr>
                                <td colspan="6">
                                    <hr style="border: 1px solid #fff;">
                                </td>
                            </tr>
                            <c:forEach items="${model.listings}" var="listing">
                                <tr> 
                                    <td>
                                        <a href="listing.htm?a=2&id=${listing.id}" style="color: #369;">
                                            <img src="${model.props.rootPath}/uploads/img/002-${listing.primaryPhoto.filename}" style="height: 60px; width: 116px;"/>
                                        </a>
                                    </td>
                                    <td>
                                        <table>
                                            <tr></tr>
                                            <tr style="background-color: transparent;">
                                                <td><a href="listing.htm?a=2&id=${listing.id}" style="color: #000; font-size: 13px;"><div style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${listing.title}</div></a></td>
                                            </tr>
                                            <tr></tr>
                                            <tr>
                                                <td style="font-size:13px;">
                                                    <a href="listing.htm?a=4&id=${listing.id}" style="color: #369;">edit info</a>
                                                    &bull;
                                                    <a href="listing.htm?a=1003&id=${listing.id}" style="color: #369;">edit photos</a>
                                                    &bull;
                                                    <a href="#" style="color: #369;" onclick="if(confirm('Are you sure you want to delete this property?')) { window.location='listing.htm?a=5&id=${listing.id}'; }">delete property</a>
                                                </td>
                                            </tr>
                                        </table>                                    
                                    </td>
                                    <td align="center" width="110px">
                                        ${listing.impressions}
                                    </td>
                                    <td align="center" width="100px">                                    
                                        ${listing.views}
                                    </td>                                    
                                    <td align="center" width="150px">
                                        <c:if test="${listing.available}">
                                            <span style="color: #44C767; font-weight: normal; font-size:14px">available</span>
                                        </c:if>
                                        <c:if test="${!listing.available}">
                                            <span style="color: #CA4349; font-weight: normal;">not available</span>
                                        </c:if>
                                    </td>
                                    <td align="center">
                                        <c:if test="${listing.available}">
                                            <a href="listing.htm?a=3002&id=${listing.id}" style="color: #F00; position: relative; top: 1px;" title=" Mark listing as NOT available to rent or if there is a tenant already. ">
                                                &nbsp;<img src="${model.props.appPath}/img/btn-mark-not-available.jpg" width="200px" height="30px;"/>&nbsp;
                                            </a>
                                        </c:if>
                                        <c:if test="${!listing.available}">
                                            <a href="listing.htm?a=3001&id=${listing.id}" style="color: #0F0; position: relative; top: 1px;" title=" Mark listing as available to rent. ">
                                                &nbsp;<img src="${model.props.appPath}/img/btn-mark-available.jpg" width="200px" height="30px;"/>&nbsp; 
                                            </a>
                                        </c:if>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="6">
                                        <hr style="border: 1px solid #fff;">
                                    </td>
                                </tr>
                            </c:forEach>
                        </table>

                        <br><br><bR>
                        <br><br><bR>
                        
                    </div>
                                                       
                                        
                    <div id="section-rental-leads" style="padding: 20px; background-color: #f7f7f7;">
                        
                        <table cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; padding: 0px;">
                            <tr>
                                <td>
                                    <span id="manager" style="font-size: 22px; font-weight: bold;"></span>
                                </td>
                                <td align="right">
                                    &nbsp;&nbsp;&nbsp;<a href="featured.htm?a=21&id=${model.user.id}" style="color: #167FFC; font-size:14px;">_</a>
                                </td>
                            </tr>
                        </table>
                                
                        <c:if test="${model.showLeads == 1}">
                            
                            <table id="table-leads" cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; font-size: 13px; padding: 5px;">
                            
                            <tr>
                                <td colspan="7">
                                    <hr style="border: 1px solid #fff;">
                                </td>
                            </tr>
                            <tr>
                                <th align="center" style="height: 25px">date requested</th>
                                <th align="center">rental term</th>
                                <th align="center">property type</th>
                                <th align="center">city</th>
                                <th align="center"># of beds</th>
                                <th align="center">price range</th>
                                <th align="center"></th>
                            </tr>                   
                            <tr>
                                <td colspan="7">
                                    <hr style="border: 1px solid #fff;">
                                </td>
                            </tr>
                            <c:forEach items="${model.leads}" var="lead">
                                <tr>
                                    <td align="center" style="height: 40px"><fmt:formatDate pattern="MMMM dd yyyy" value="${lead.dateCreated}" /></td>
                                    <td align="center">${lead.term}</td>
                                    <td align="center">${lead.type}</td>
                                    <td align="center">${lead.city}</td>
                                    <td align="center">${lead.bedsMin}</td>
                                    <td align="center">${lead.priceMin} &mdash; ${lead.priceMax}</td>
                                    <td align="center" style="max-width: 200px;">
                                        <input type="button" value=" show contact " onclick="showLead('${lead.id}', '${lead.name}', '${lead.email}', '${lead.phone}', '${lead.description}')"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="7">
                                        <hr style="border: 1px solid #fff;">
                                    </td>
                                </tr>
                            </c:forEach>
                        </table>
                            
                        </c:if>
                        
                        
                        <c:if test="${model.showLeads == 0}">
                            
                            <table id="table-featured-listings" cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; font-size: 16px; padding: 5px;">
                                
                                <tr>
                                    <td >
                                        <hr style="border: 1px solid #fff;">
                                    </td>
                                </tr>
                                <tr>
                                    <td >
                                        <br>
                                        <div style="margin-left: 20px;">
                                            Ahoy there!<br><br>
                                            You do not have access to this feature yet =(<br><br>
                                            To gain access you must have at least <b>five (5) properties posted and approved on Rentpad</b>.<br><br>
                                            If you have any questions, ask away via <span style="color: #369">team@rentpad.me</span><br><br>
                                            Have a great day!
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            
                        </c:if>
                        
                    </div>    
                    
                    
                </div>

                <br><br>                

            </div>

            <%@include file="footer.jsp" %>

        </div>

    </body>
    
</html>
